<template>
  <div
    class="flex flex-col items-center justify-center mx-auto w-full h-full  min-h-[30rem]"
  >
    <div class="flex flex-col space-y-10 justify-center items-center">
      <div class="text-center h-[3rem]">
        <p class="text-5xl font-medium text-center text-green-500">
          {{ courseStore.currentData?.english }}
        </p>
        <div class="badge badge-ghost mt-2">
          {{ courseStore.currentData?.mark }}
        </div>
      </div>
      <div class="divider">译文</div>
      <p
        class="text-2xl text-center text-base-content/80 h-[3rem] flex items-center justify-center"
      >
        {{ courseStore.currentData?.chinese }}
      </p>
    </div>
  </div>
  <div class="flex gap-[3rem] items-center justify-center h-[5rem]">
    <StudyPlayKdd />
    <div
      class="tooltip tooltip-bottom"
      data-tip="再来一次  快捷键 ctrl 3"
      @click="showInput()"
    >
      <button class="btn btn-sm btn-dash">
        <template v-if="!isMobile()">
          <kbd class="kbd kbd-xs">ctrl</kbd>
          <kbd class="kbd kbd-xs">3</kbd>
        </template>
         再来一次
      </button>
    </div>
    <div class="tooltip" data-tip="下一个" @click="goNext()">
      <button class="btn btn-sm btn-dash btn-primary">
        <template v-if="!isMobile()">
            <kbd class="kbd kbd-xs">enter</kbd>
        </template>
         下一个
      </button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useCourseStore } from "~/stores/course";
const courseStore = useCourseStore();
import { isMobile } from "~/composables/common/mobile";
import {
  registerShortcut,
  cancelShortcut,
} from "~/composables/user/globalShortcut";
import type { Shortcut } from "~/composables/user/globalShortcut";
import { useStudyInput } from "~/composables/study/useStudy";
const { goNext } = useStudyInput();
import { useInput } from "~/composables/study/studentStatus";
const { showInput } = useInput();

const registeredShortcuts: Shortcut[] = [];

onMounted(() => {
  registeredShortcuts.push(
    registerShortcut(
      "ctrl+3",
      (e) => {
        e.preventDefault();
        showInput();
      },
      { priority: "high" }
    )
  );

  registeredShortcuts.push(
    registerShortcut(
      "enter",
      (e) => {
        e.preventDefault();
        console.log("enter");
        goNext();
      },
      { priority: "high" }
    )
  );
});

onUnmounted(() => {
  registeredShortcuts.forEach((shortcut) => cancelShortcut(shortcut));
});
</script>
